<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>财务报表 - 个人财务管理系统</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <!-- 引入自定义CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container-fluid">
            <a class="navbar-brand" href="{{ url_for('index') }}">个人财务管理系统</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('index') }}">交易管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="{{ url_for('reports') }}">财务报表</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('budget') }}">预算管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('settings') }}">设置</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container mt-5">
        <!-- 财务摘要卡片 -->
        <div class="row mb-5">
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="card summary-card income-card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between items-center">
                            <h5 class="card-title">总收入</h5>
                            <i class="fa fa-arrow-circle-up fa-2x text-green"></i>
                        </div>
                        <p class="card-text amount">¥{{ "%.2f"|format(summary.total_income) }}</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="card summary-card expense-card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between items-center">
                            <h5 class="card-title">总支出</h5>
                            <i class="fa fa-arrow-circle-down fa-2x text-red"></i>
                        </div>
                        <p class="card-text amount">¥{{ "%.2f"|format(summary.total_expense) }}</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="card summary-card balance-card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between items-center">
                            <h5 class="card-title">结余</h5>
                            <i class="fa fa-balance-scale fa-2x text-blue"></i>
                        </div>
                        <p class="card-text amount {% if summary.balance < 0 %}text-red{% endif %}">¥{{ "%.2f"|format(summary.balance) }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 月份选择器 -->
        <div class="row mb-5">
            <div class="col-md-6">
                <h2>{{ selected_month }} 财务报表</h2>
            </div>
            <div class="col-md-6 text-right">
                <form method="GET" action="{{ url_for('reports') }}">
                    <div class="input-group" style="max-width: 250px; float: right;">
                        <input type="month" name="month" class="form-control" value="{{ selected_month }}">
                        <button type="submit" class="btn btn-primary">查看</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 图表展示区域 -->
        <div class="row mb-5">
            <!-- 饼图 - 支出分类占比 -->
            <div class="col-lg-6 mb-4">
                <div class="card">
                    <div class="card-header">
                        <h3>支出分类占比</h3>
                    </div>
                    <div class="card-body">
                        <div class="chart-container" style="position: relative; height:300px;">
                            <canvas id="expenseChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 柱状图 - 收支对比 -->
            <div class="col-lg-6 mb-4">
                <div class="card">
                    <div class="card-header">
                        <h3>收支对比</h3>
                    </div>
                    <div class="card-body">
                        <div class="chart-container" style="position: relative; height:300px;">
                            <canvas id="incomeExpenseChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 预算状态表格 -->
        {% if budget_status %}
            <div class="row mb-5">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <h3>预算执行情况</h3>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead class="table-primary">
                                        <tr>
                                            <th>类别</th>
                                            <th>预算金额</th>
                                            <th>实际支出</th>
                                            <th>剩余金额</th>
                                            <th>执行进度</th>
                                            <th>状态</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for item in budget_status %}
                                            <tr class="{% if item.percentage > 100 %}table-danger{% elif item.percentage > 80 %}table-warning{% else %}table-success{% endif %}">
                                                <td>{{ item.category }}</td>
                                                <td>¥{{ "%.2f"|format(item.budget_amount) }}</td>
                                                <td>¥{{ "%.2f"|format(item.actual_amount) }}</td>
                                                <td>¥{{ "%.2f"|format(item.remaining) }}</td>
                                                <td>
                                                    <div class="progress" style="height: 20px;">
                                                        <div class="progress-bar {% if item.percentage > 100 %}bg-danger{% elif item.percentage > 80 %}bg-warning{% else %}bg-success{% endif %}" 
                                                             role="progressbar" 
                                                             style="width: {% if item.percentage > 100 %}100{% else %}{{ item.percentage }}{% endif %}%" 
                                                             aria-valuenow="{{ item.percentage }}" 
                                                             aria-valuemin="0" 
                                                             aria-valuemax="100">
                                                            {{ "%.1f"|format(item.percentage) }}%
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    {% if item.percentage > 100 %}
                                                        <span class="badge bg-danger">超支</span>
                                                    {% elif item.percentage > 80 %}
                                                        <span class="badge bg-warning">接近预算</span>
                                                    {% else %}
                                                        <span class="badge bg-success">正常</span>
                                                    {% endif %}
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}
    </div>

    <!-- 引入Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 引入自定义JS -->
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
    
    <script>
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化支出分类饼图
            const expenseCtx = document.getElementById('expenseChart').getContext('2d');
            const expenseChart = new Chart(expenseCtx, {
                type: 'doughnut',
                data: {
                    labels: {{ categories|tojson }},
                    datasets: [{
                        label: '支出金额',
                        data: {{ amounts|tojson }},
                        backgroundColor: [
                            '#FF6384',
                            '#36A2EB',
                            '#FFCE56',
                            '#4BC0C0',
                            '#9966FF',
                            '#FF9F40',
                            '#C9CBCF'
                        ],
                        borderColor: [
                            '#FF6384',
                            '#36A2EB',
                            '#FFCE56',
                            '#4BC0C0',
                            '#9966FF',
                            '#FF9F40',
                            '#C9CBCF'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    let label = context.label || '';
                                    if (label) {
                                        label += ': ';
                                    }
                                    if (context.parsed !== null) {
                                        label += '¥' + context.parsed.toFixed(2);
                                    }
                                    return label;
                                }
                            }
                        }
                    }
                }
            });

            // 初始化收支对比柱状图
            const incomeExpenseCtx = document.getElementById('incomeExpenseChart').getContext('2d');
            const incomeExpenseChart = new Chart(incomeExpenseCtx, {
                type: 'bar',
                data: {
                    labels: ['收入', '支出'],
                    datasets: [{
                        label: '金额',
                        data: [{{ summary.total_income }}, {{ summary.total_expense }}],
                        backgroundColor: [
                            '#28a745',
                            '#dc3545'
                        ],
                        borderColor: [
                            '#28a745',
                            '#dc3545'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                callback: function(value) {
                                    return '¥' + value.toFixed(0);
                                }
                            }
                        }
                    },
                    plugins: {
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    let label = context.dataset.label || '';
                                    if (label) {
                                        label += ': ';
                                    }
                                    if (context.parsed.y !== null) {
                                        label += '¥' + context.parsed.y.toFixed(2);
                                    }
                                    return label;
                                }
                            }
                        }
                    }
                }
            });
        });
    </script>
</body>
</html>